<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>经典布局</title>
        <style>
            body,*{padding:0px;margin:0px;}
            
            #header{
                width:960px;
                background-color:#ccc;
                margin:0px auto;
                overflow:hidden;
            }
            #header span:first-child{
                width:200px;
                height:80px;
                float:left;
                background-color:pink;
            }
            #header span:nth-child(2){
                width:540px;
                height:80px;
                float:left;
                background-color:red;
                margin:0px 10px;
            }
            #header span:last-child{
                width:200px;
                height:80px;
                float:left;
                background-color:blue;
            }
/*--------------------------------------------------------------*/            
            
            #nav{
                width:960px;
                height:40px;
                background-color:yellow;
                margin:10px auto;
            }
            
/*------------------------------------------------------------*/            
            #mainbody{
                width:960px;
                height:410px;
                background-color:green;
                margin:10px auto;
                position:relative;
            }
            
            #mainbody div:first-child{
                width:750px;
                height:200px;
                background-color:pink;
                margin-bottom:10px;
              /*  overflow:hidden; */
            }
            #mainbody div:nth-child(2){
                width:750px;
                height:200px;
                background-color:pink;
            }
            #mainbody div:first-child>span:first-child{
                width:370px;
                height:200px;
                float:left;
                background-color:yellow;
            }
            #mainbody div:first-child>span:last-child{
                width:370px;
                height:200px;
                float:right;
                background-color:greenyellow;
            }
            
            #mainbody div:nth-child(2) span{
                width:180px;height:200px;
                float:left;
                background-color:orange;
                margin-right:10px;
            }
            
            #mainbody div:last-child{
                width:200px;height:410px;
                background-color:orangered;
                position:absolute;
                top:0px;right:0px;
            }
            
            #mainbody div:last-child span{
                width:200px;
                height:130px;
                float:left;
                background-color:black;
               
            }
            #mainbody div:last-child span:nth-child(2){
                margin:10px 0px;
            }
 /*------------------------------------------------------------*/                
            #footer{
                width:960px;
                height:60px;
                background-color:blue;
                margin:0px auto;
            }
        </style>
    </head>
    <body>
        <div id='header'>
            <span></span><span></span><span></span>
        </div>
        <div id='nav'></div>
        <div id='mainbody'>
            <div>
                <span></span><span></span>
            </div>
            <div>
                <span></span><span></span><span></span><span style='margin-right:0px;'></span>
            </div>
            <div>
                <span></span><span></span><span></span>
            </div>
        </div>
        <div id='footer'></div>
    </body>
</html>
